﻿<template>
  <my-container v-loading="pageLoading">
    <!--顶部操作-->
    <template #header>
      <el-form class="ad-form-query" :inline="true" @submit.native.prevent>
        <el-form-item>
          <my-search :fields="fields" @click="onSearch" />
        </el-form-item>
        <el-form-item v-if="checkPermission(['api:admin:networkcard:delete'])">
          <my-confirm-button :disabled="sels.length === 0" :type="'delete'" :placement="'bottom-end'"
            :loading="deleteLoading" style="margin-left: 0px;" @click="onBatchDelete">
            <template #content>
              <p>确定要批量删除吗？</p>
            </template>
            批量删除
          </my-confirm-button>
        </el-form-item>
      </el-form>
    </template>

    <!--列表-->
    <el-table v-loading="listLoading" :data="pageList" highlight-current-row height="'100%'"
      style="width: 100%;height:100%;" @selection-change="onSelsChange">
           
      <el-table-column type="selection" width="50" />
           
      <el-table-column prop="iccid" label="ICCID" width="170" />
           
      <el-table-column prop="accessPhone" label="接入号码" width="120" />
           
      <el-table-column prop="carrierOperatorDictionaryName" label="套餐系列" width="120" />

      <el-table-column prop="isApiRecharge" label="仅余额充值" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isApiRecharge ? 'success' : 'danger'">{{
          scope.row.isApiRecharge ? "是" : "否"
          }}</el-tag>
        </template>
      </el-table-column>
           
      <el-table-column prop="statusName" label="卡状态" />
           
      <el-table-column prop="isRealName" label="实名">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isRealName ? 'success' : 'danger'">{{
          scope.row.isRealName ? "已实名" : "未实名"
          }}</el-tag>
        </template>
      </el-table-column>
           
      <el-table-column prop="isChanneling" label="窜卡">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isChanneling ? 'success' : 'danger'">{{
          scope.row.isChanneling ? "已窜卡" : "未窜卡"
          }}</el-tag>
        </template>
      </el-table-column>
           
      <el-table-column prop="remark" label="备注" />
           
      <el-table-column prop="creationTime" label="创建时间" :formatter="formatCreatedTime" />
           
            <el-table-column v-if="checkPermission(['api:admin:networkcard:update', 'api:admin:networkcard:delete'])"
        label="操作" width="180">
                <template #default="{ $index, row }">
                    <el-button v-if="checkPermission(['api:admin:networkcard:update'])"
            @click="infoDialogFormVisible=true">编辑
          </el-button>
                   
          <my-confirm-button v-if="checkPermission(['api:admin:networkcard:delete'])" type="delete"
            :loading="row._loading" @click="onDelete($index, row)" />
                 
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <template #footer>
      <my-pagination ref="pager" :total="total" :checked-count="sels.length" @get-page="pageList" />
    </template>
    <!-- 添加 -->
    <my-window v-if="checkPermission(['api:admin:carrieroperator:add'])" title="网卡详情"
      :visible.sync="infoDialogFormVisible" @close="onCloseAddForm">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-descriptions size="medium" style="padding: 20px 10px;">
            <el-descriptions-item label="ICCID">{{networkCard.iccid}}</el-descriptions-item>
            <el-descriptions-item label="接入号">{{networkCard.accessPhone}}</el-descriptions-item>
            <el-descriptions-item label="IMEI">{{networkCard.imei}}</el-descriptions-item>
            <el-descriptions-item label="虚拟号码">{{networkCard.emptyPhone}}</el-descriptions-item>
            <el-descriptions-item label="运营商">{{networkCard.CcarrierOperatorName}}</el-descriptions-item>
            <el-descriptions-item label="网卡状态">{{networkCard.statusName}}</el-descriptions-item>
            <el-descriptions-item label="卡类型">{{networkCard.networkCardDictionaryName}}</el-descriptions-item>
            <el-descriptions-item label="导入时间">{{networkCard.creationTime}}</el-descriptions-item>
            <el-descriptions-item label="当前限速值">{{networkCard.rateLimit}}</el-descriptions-item>
            <el-descriptions-item label="运营商实名">
              <el-tag :size="networkCard.isRealName?'small':'danger'">{{networkCard.isRealName?"已实名":"未实名"}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="钱包余额">{{networkCard.walletBalance}}</el-descriptions-item>
            <el-descriptions-item label="赠送余额">{{networkCard.giftBalance}}</el-descriptions-item>
            <el-descriptions-item label="暂停执行">
              <el-tag :size="networkCard.isPollingCard?'small':'danger'">{{networkCard.isPollingCard?"执行":"暂停"}}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="过期时间">{{networkCard.expirationTime}}</el-descriptions-item>
            <el-descriptions-item label="备注">{{networkCard.remark}}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="流量信息" name="second">
          <el-descriptions size="medium" style="padding: 20px 10px;">
            <el-descriptions-item label="套餐总流量">{{networkCard.rateFlowTotal}}</el-descriptions-item>
            <el-descriptions-item label="套餐总流量（虚）">{{networkCard.virtualRateFlowTotal}}</el-descriptions-item>
            <el-descriptions-item label="基础套餐">{{networkCard.packageName}}</el-descriptions-item>
            <el-descriptions-item label="使用流量">{{networkCard.useRateFlow}}</el-descriptions-item>
            <el-descriptions-item label="剩余流量">{{networkCard.residueRateFlow}}</el-descriptions-item>
            <el-descriptions-item label="使用流量（虚）">{{networkCard.virtualUseRateFlow}}</el-descriptions-item>
            <el-descriptions-item label="剩余流量（虚）">{{networkCard.virtualResidueRateFlow}}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="套餐记录" name="third">套餐记录</el-tab-pane>
        <el-tab-pane label="钱包记录" name="fourth">钱包记录</el-tab-pane>
        <el-tab-pane label="限速记录" name="fourth">限速记录</el-tab-pane>
        <el-tab-pane label="网卡操作" name="fourth">网卡操作</el-tab-pane>
      </el-tabs>
    </my-window>

  </my-container>
</template>

<script>
import { formatTime, listToTree, getTreeParents } from '@/utils'
import { getPageList, get, add, update, softDelete, batchSoftDelete, baseNetworkCard,networkCardRateFlow } from '@/api/iot/network-card'
import MyContainer from '@/components/my-container'
import MyConfirmButton from '@/components/my-confirm-button'
import MySearch from '@/components/my-search'
import MySearchWindow from '@/components/my-search-window'
import MyWindow from '@/components/my-window'

export default {
  name: 'networkcard',
  components: { MyContainer, MyConfirmButton, MySearch, MySearchWindow, MyWindow },
  data() {
    return {
      // 高级查询字段
      fields: [
        {
          value: 'creationTime', label: '创建时间', type: 'date', operator: 'daterange',
          config: { type: 'daterange', format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' }
        }
      ],
      infoDialogFormVisible: false,
      deleteLoading: false,
      dynamicFilter: null,
      pageList: [],
      total: 0,
      sels: [], // 列表选中列
      listLoading: false,
      pageLoading: false,
      activeName: 'first',
      networkCard: {
        iccid: "--",
        accessPhone: '--',
        imei: '--',
        statusName: '--',
        walletBalance: '--',
        giftBalance: '--',
        carrierOperatorName: '--',
        networkCardDictionaryName: '--',
        emptyPhone: '--',
        isRealName: '--',
        isPollingCard: '--',
        expirationTime: '--',
        creationTime: '--',
        rateLimit: '--',
        remark: '--',
        rateFlowTotal: '--',
        packageName: '--',
        useRateFlow: '--',
        residueRateFlow: '--',
        virtualUseRateFlow: '--',
        virtualResidueRateFlow: '--'
      }
    }
  },
  async mounted() {
    await this.onGetPageList()
  },
  computed: {
    avatar() {
      const path = this.editForm.avatar
        ? process.env.VUE_APP_AVATAR_URL + this.editForm.avatar
        : this.avatarDefault;
      return path;
    },
  },
  methods: {
    formatCreatedTime(row, column, time) {
      return formatTime(time, 'YYYY-MM-DD HH:mm')
    },
    async handleClick(tab, event) {
      if (this.activeName == "first") {
        const baseNetworkCardRes = await baseNetworkCard({ id: '3a06b3d8-16cb-aa6e-10e2-3931fd4a7b92' });
        if (!baseNetworkCardRes?.success) {
          return
        }
        this.networkCard = baseNetworkCardRes.data;
      } else if (this.activeName == "second") {
        const baseNetworkCardRes = await networkCardRateFlow({ id: '3a06b3d8-16cb-aa6e-10e2-3931fd4a7b92' });
        if (!baseNetworkCardRes?.success) {
          return
        }
        this.networkCard = baseNetworkCardRes.data;
      }



    },
    // 关闭添加
    onCloseAddForm() {
      this.infoDialogFormVisible = false
    },
    // 查询
    onSearch(dynamicFilter) {
      this.$refs.pager.setPage(1)
      this.dynamicFilter = dynamicFilter
      this.onGetPageList()
    },
    // 选择
    onSelsChange(sels) {
      this.sels = sels
    },
    // 获取列表
    async onGetPageList() {
      var pager = this.$refs.pager.getPager()
      const params = {
        ...pager,
        dynamicFilter: this.dynamicFilter
      }
      this.listLoading = true
      const res = await getPageList(params)
      this.listLoading = false
      if (!res?.success) {
        return
      }
      this.total = res.data.total
      const data = res.data.list
      data.forEach(d => {
        d._loading = false
      })
      this.pageList = data
    },
    // 批量删除
    async onBatchDelete() {
      const para = { ids: [] };
      para.ids = this.sels.map((s) => {
        return s.id;
      });
      this.deleteLoading = true;
      const res = await batchSoftDelete(para.ids);
      this.deleteLoading = false;

      if (!res?.success) {
        return;
      }

      this.$message({
        message: this.$t("admin.batchDeleteOk"),
        type: "success",
      });

      this.onGetPageList();
    },
    // 删除
    async onDelete(index, row) {
      row._loading = true
      const para = { id: row.id }
      const res = await softDelete(para);
      row._loading = false
      if (!res?.success) {
        return
      }
      this.$message({
        message: this.$t('admin.deleteOk'),
        type: 'success'
      })
      this.onGetPageList()
    }
  }
}
</script>

<style lang="scss" scoped>
.my-search ::v-deep .el-input-group__prepend {
  background-color: #fff;
}
</style>
